<template>
	<footer>
		<router-link to="/home">
			<dl :class="shouye===true?'active':''" @click="shou()">
				<dt class="liangQ">
					&#xe6ee;
				</dt>
				<dd>
					首页
				</dd>
			</dl>
		</router-link>
		<router-link to="/sort">
			<dl @click="othe()">
				<dt class="liangQ">
					&#xe61e;
				</dt>
				<dd>
					分类
				</dd>
			</dl @click="othe()">
		</router-link>
		<router-link to="/market">
			<dl>
				<dt class="liangQ">
					&#xe61b;
				</dt>
				<dd>
					全球尖货
				</dd>
			</dl>
		</router-link>
		<router-link to="/cart">
			<dl @click="othe()">
				<dt class="liangQ">
					&#xe61c;
				</dt>
				<dd>
					购物车
				</dd>
			</dl>
		</router-link>
		<router-link to="/mine">
			<dl @click="othe()">
				<dt class="liangQ">
					&#xe621;
				</dt>
				<dd>
					个人中心
				</dd>
			</dl>
		</router-link>
	</footer>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				shouye:true,
			}
		},
		methods:{
			shou(){
				this.shouye=!this.shouye

			},
			othe(){
				this.shouye=false;
			}
		}
	}
</script>

<style type="text/css" scoped>
        footer{
        	width:100%;
        	height:1.5rem;
        	display: flex;
        	position:fixed;
        	justify-content: space-around;
        	text-align: center;
        	background:#fff;
        	left: 0;right: 0;bottom: 0;
        }
        footer a{
        	width:20%;
        	margin-top: .145rem;
        }
        footer dt img{
        	width:40%;
        }
       footer a{
       	color:#666;
       }
       .active{
        	color:#ff6900;
        }
		footer a:hover{
			color:#ff6900;
		}
        .liangQ{
        	font-family: 'iconfont';
        	font-size: .7rem;
        }
     	 @font-face {
			  font-family: 'iconfont';  /* project id 345259 */
			  src: url('//at.alicdn.com/t/font_345259_2brv90ek6vtpgb9.eot');
			  src: url('//at.alicdn.com/t/font_345259_2brv90ek6vtpgb9.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_345259_2brv90ek6vtpgb9.woff') format('woff'),
			  url('//at.alicdn.com/t/font_345259_2brv90ek6vtpgb9.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_345259_2brv90ek6vtpgb9.svg#iconfont') format('svg');
			}
		@font-face {
			  font-family: 'iconfont';  /* project id 345259 */
			  src: url('//at.alicdn.com/t/font_345259_uvu8sbo06bznnrk9.eot');
			  src: url('//at.alicdn.com/t/font_345259_uvu8sbo06bznnrk9.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_345259_uvu8sbo06bznnrk9.woff') format('woff'),
			  url('//at.alicdn.com/t/font_345259_uvu8sbo06bznnrk9.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_345259_uvu8sbo06bznnrk9.svg#iconfont') format('svg');
			}
		@font-face {
			  font-family: 'iconfont';  /* project id 345259 */
			  src: url('//at.alicdn.com/t/font_345259_6z4w5mx1t76i529.eot');
			  src: url('//at.alicdn.com/t/font_345259_6z4w5mx1t76i529.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_345259_6z4w5mx1t76i529.woff') format('woff'),
			  url('//at.alicdn.com/t/font_345259_6z4w5mx1t76i529.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_345259_6z4w5mx1t76i529.svg#iconfont') format('svg');
			}
			@font-face {
			  font-family: 'iconfont';  /* project id 345259 */
			  src: url('//at.alicdn.com/t/font_345259_zhxwdxt8igvz33di.eot');
			  src: url('//at.alicdn.com/t/font_345259_zhxwdxt8igvz33di.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_345259_zhxwdxt8igvz33di.woff') format('woff'),
			  url('//at.alicdn.com/t/font_345259_zhxwdxt8igvz33di.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_345259_zhxwdxt8igvz33di.svg#iconfont') format('svg');
			}
</style>